<template>
  <div id="slideButton">
    <el-switch
        :change="changeDarkOrLight()"
        v-model="isDark"
        active-color="#1d55b1"
        inactive-color="#d6d6d6">
    </el-switch>
  </div>
</template>
<script>
import changeMode from "@/static/js/changeMode";

  export default {
    name: 'slideButton',
    data(){
      return{
        isDark:false
      }
    },
    created() {
      this.judgeIsDark()
    },
    methods:{
      changeDarkOrLight:function (){

        if(this.isDark === true){
          localStorage.setItem('mode','dark')
          changeMode.dark()
        }
        if(this.isDark === false){
          localStorage.setItem('mode','white')
          changeMode.daily()
        }
        // if(localStorage.mode){
        //   if(localStorage.mode === 'dark'){
        //     localStorage.setItem('mode','white')
        //     document.documentElement.style.setProperty('--theme-bgColor','#f8f8f8')
        //   }if(localStorage.mode === 'white'){
        //     localStorage.setItem('mode','dark')
        //     document.documentElement.style.setProperty('--theme-bgColor','#040a17')
        //   }
        // }else{
        //
        // }
      },
      judgeIsDark(){
        if(localStorage.mode === 'dark'){
          this.isDark = true
          changeMode.dark()
        }else{
          this.isDark = false
          changeMode.daily()
        }
      }
    }

  }
</script>

<style lang="less" scoped>
  #slideButton{

    position: absolute;
    right: 8.5px;

    /*#slideBox-de:hover #slideBox-de:before{*/
    /*}*/
  }

</style>
